<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>tree</title>
<link rel="stylesheet" type="text/css" href="css/easyui.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/SyntaxHighlighter.css" />

<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/shBrushJScript.js"></script>
<script type="text/javascript" src="js/shBrushXml.js"></script>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body style="text-align:left">
<div style="padding:10px">

<h3>Tree</h3>
<p>Override defaults with $.fn.tree.defaults.</p>
<img src="images/tree.png">

<h4>Dependencies</h4>
<ul>
	<li>draggable</li>
	<li>droppable</li>
</ul>

<h4>Usage</h4>
<p>Tree can be definded in &lt;ul&gt; element. The markup can defines leaf and children, below is an example:</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">ul</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">"tt"</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">li</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">span</span><span class="tag">&gt;</span><span>Folder</span><span class="tag">&lt;/</span><span class="tag-name">span</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">ul</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">li</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">span</span><span class="tag">&gt;</span><span>Sub&nbsp;Folder&nbsp;1</span><span class="tag">&lt;/</span><span class="tag-name">span</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">ul</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">li</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">span</span><span class="tag">&gt;</span><span class="tag">&lt;</span><span class="tag-name">a</span><span>&nbsp;</span><span class="attribute">href</span><span>=</span><span class="attribute-value">"#"</span><span class="tag">&gt;</span><span>File&nbsp;11</span><span class="tag">&lt;/</span><span class="tag-name">a</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">span</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">li</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">li</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">span</span><span class="tag">&gt;</span><span>File&nbsp;12</span><span class="tag">&lt;/</span><span class="tag-name">span</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">li</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">li</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">span</span><span class="tag">&gt;</span><span>File&nbsp;13</span><span class="tag">&lt;/</span><span class="tag-name">span</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">li</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">ul</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">li</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">li</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">span</span><span class="tag">&gt;</span><span>File&nbsp;2</span><span class="tag">&lt;/</span><span class="tag-name">span</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">li</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">li</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">span</span><span class="tag">&gt;</span><span>File&nbsp;3</span><span class="tag">&lt;/</span><span class="tag-name">span</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">li</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">ul</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">li</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">li</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">span</span><span class="tag">&gt;</span><span>File21</span><span class="tag">&lt;/</span><span class="tag-name">span</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">li</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span><span class="tag">&lt;/</span><span class="tag-name">ul</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><textarea class="html" name="code-tree" style="display: none;">	&lt;ul id="tt"&gt;
		&lt;li&gt;
			&lt;span&gt;Folder&lt;/span&gt;
			&lt;ul&gt;
				&lt;li&gt;
					&lt;span&gt;Sub Folder 1&lt;/span&gt;
					&lt;ul&gt;
						&lt;li&gt;
							&lt;span&gt;&lt;a href="#"&gt;File 11&lt;/a&gt;&lt;/span&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;span&gt;File 12&lt;/span&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;span&gt;File 13&lt;/span&gt;
						&lt;/li&gt;
					&lt;/ul&gt;
				&lt;/li&gt;
				&lt;li&gt;
					&lt;span&gt;File 2&lt;/span&gt;
				&lt;/li&gt;
				&lt;li&gt;
					&lt;span&gt;File 3&lt;/span&gt;
				&lt;/li&gt;
			&lt;/ul&gt;
		&lt;/li&gt;
		&lt;li&gt;
			&lt;span&gt;File21&lt;/span&gt;
		&lt;/li&gt;
	&lt;/ul&gt;
</textarea>
<p>Tree can also be defined in an empty &lt;ul&gt; element:</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">ul</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">"tt"</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">ul</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><textarea class="html" name="code-tree" style="display: none;">	&lt;ul id="tt"&gt;&lt;/ul&gt;
</textarea>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>$(</span><span class="string">'#tt'</span><span>).tree({&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;url:<span class="string">'tree_data.json'</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>});&nbsp;&nbsp;</span></li></ol></div><textarea class="js" name="code-tree" style="display: none;">	$('#tt').tree({
		url:'tree_data.json'
	});
</textarea>

<p>Use loadFilter to process the json data from ASP.NET web services.</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>$(</span><span class="string">'#tt'</span><span>).tree({&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;...,&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;loadFilter:&nbsp;<span class="keyword">function</span><span>(data){&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">if</span><span>&nbsp;(data.d){&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">return</span><span>&nbsp;data.d;&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;<span class="keyword">else</span><span>&nbsp;{&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">return</span><span>&nbsp;data;&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li><li class=""><span>});&nbsp;&nbsp;</span></li></ol></div><textarea class="js" name="code-tree" style="display: none;">	$('#tt').tree({
		url: ...,
		loadFilter: function(data){
			if (data.d){
				return data.d;
			} else {
				return data;
			}
		}
	});
</textarea>

<br>
<h4>Tree data format</h4>
<p>Every node can contains following properties:</p>
<ul>
<li>id: node id, which is important to load remote data</li>
<li>text: node text to show</li>
<li>state: node state, 'open' or 'closed', default is 'open'. When set to 'closed', the node have children nodes and will load them from remote site</li>
<li>checked: Indicate whether the node is checked selected.</li>
<li>attributes: custom attributes can be added to a node</li>

<li>children: an array nodes defines some children nodes</li>
</ul>
<p>Some example:</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>[{&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="string">"id"</span><span>:1,&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="string">"text"</span><span>:</span><span class="string">"Folder1"</span><span>,&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="string">"iconCls"</span><span>:</span><span class="string">"icon-save"</span><span>,&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="string">"children"</span><span>:[{&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="string">"text"</span><span>:</span><span class="string">"File1"</span><span>,&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="string">"checked"</span><span>:</span><span class="keyword">true</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;},{&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="string">"text"</span><span>:</span><span class="string">"Books"</span><span>,&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="string">"state"</span><span>:</span><span class="string">"open"</span><span>,&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="string">"attributes"</span><span>:{&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="string">"url"</span><span>:</span><span class="string">"/demo/book/abc"</span><span>,&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="string">"price"</span><span>:100&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="string">"children"</span><span>:[{&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="string">"text"</span><span>:</span><span class="string">"PhotoShop"</span><span>,&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="string">"checked"</span><span>:</span><span class="keyword">true</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},{&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="string">"id"</span><span>:&nbsp;8,&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="string">"text"</span><span>:</span><span class="string">"Sub&nbsp;Bookds"</span><span>,&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="string">"state"</span><span>:</span><span class="string">"closed"</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}]&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;}]&nbsp;&nbsp;</span></li><li class=""><span>},{&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="string">"text"</span><span>:</span><span class="string">"Languages"</span><span>,&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="string">"state"</span><span>:</span><span class="string">"closed"</span><span>,&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="string">"children"</span><span>:[{&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="string">"text"</span><span>:</span><span class="string">"Java"</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;},{&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="string">"text"</span><span>:</span><span class="string">"C#"</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;}]&nbsp;&nbsp;</span></li><li class=""><span>}]&nbsp;&nbsp;</span></li></ol></div><textarea class="js" name="code-tree" style="display: none;">	[{
		"id":1,
		"text":"Folder1",
		"iconCls":"icon-save",
		"children":[{
			"text":"File1",
			"checked":true
		},{
			"text":"Books",
			"state":"open",
			"attributes":{
				"url":"/demo/book/abc",
				"price":100
			},
			"children":[{
				"text":"PhotoShop",
				"checked":true
			},{
				"id": 8,
				"text":"Sub Bookds",
				"state":"closed"
			}]
		}]
	},{
		"text":"Languages",
		"state":"closed",
		"children":[{
			"text":"Java"
		},{
			"text":"C#"
		}]
	}]
</textarea>

<h4>Properties</h4>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Type</strong></th>
<th><strong>Description</strong></th>
<th><strong>Default</strong></th>
</tr>
<tr>

<td>url</td>
<td>string</td>
<td>a URL to retrieve remote data.</td>
<td>null</td>
</tr>
<tr>
<td>method</td>
<td>string</td>
<td>The http method to retrieve data.</td>
<td>post</td>

</tr>
<tr>
<td>animate</td>
<td>boolean</td>
<td>Defines if to show animation effect when node expand or collapse.</td>
<td>false</td>
</tr>
<tr>
<td>checkbox</td>
<td>boolean</td>
<td>Defines if to show the checkbox before every node.</td>

<td>false</td>
</tr>
<tr>
<td>cascadeCheck</td>
<td>boolean</td>
<td>Defines if to cascade check.</td>
<td>true</td>
</tr>
<tr>
<td>onlyLeafCheck</td>
<td>boolean</td>

<td>Defines if to show the checkbox only before leaf node.</td>
<td>false</td>
</tr>
<tr>
<td>lines</td>
<td>boolean</td>
<td>Defines if to show tree lines.</td>
<td>false</td>
</tr>
<tr>
<td>dnd</td>
<td>boolean</td>
<td>Defines if to enable drag and drop.</td>
<td>false</td>
</tr>
<tr>
<td>data</td>

<td>array</td>
<td>The node data to be loaded.</td>
<td>null</td>
</tr>
<tr>
<td>loader</td>
<td>function(param,success,error)</td>
<td>
Defines how to load data from remote server. Return false can abort this action.
This function takes the following parameters:<br>
param: the parameter object to pass to remote server.<br>
success(data): the callback function that will be called when retrieve data successfully.<br>
error(): the callback function that will be called when failed to retrieve data.
</td>
<td>json loader</td>
</tr>
<tr>
<td>loadFilter</td>
<td>function(data,parent)</td>
<td>
Return the filtered data to display. The returned data is in standard tree format.
This function takes the following parameters:<br>
data: the original data to be loaded.<br>
parent: DOM object, indicate the parent node.
</td>
<td></td>
</tr>
</tbody></table>

<h4>Events</h4>
<p>Many events callback function can take the 'node' parameter, which contains following properties:</p>
<ul>
<li>id: An identity value bind to the node.</li>
<li>text: Text to be showed.</li>
<li>iconCls: The css class to display icon.</li>
<li>checked: Whether the node is checked.</li>
<li>state: The node state, 'open' or 'closed'.</li>
<li>attributes: Custom attributes bind to the node.</li>
<li>target: Target DOM object.</li>
</ul>

<table class="doc-table">

<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Parameters</strong></th>
<th><strong>Description</strong></th>
</tr>
<tr>
<td>onClick</td>
<td>node</td>
<td>
Fires when user click a node. Code example:
<pre style="color:#006600">$('#tt').tree({
	onClick: function(node){
		alert(node.text);  // alert node text property when clicked
	}
});
</pre>
</td>
</tr>
<tr>
<td>onDblClick</td>
<td>node</td>
<td>Fires when user dblclick a node.</td>
</tr>

<tr>
<td>onBeforeLoad</td>
<td>node, param</td>
<td>Fires before a request is made to load data, return false to cancel this load action.</td>
</tr>
<tr>
<td>onLoadSuccess</td>
<td>node, data</td>
<td>Fires when data loaded successfully.</td>
</tr>
<tr>

<td>onLoadError</td>
<td>arguments</td>
<td>Fires when data loaded fail, the arguments parameter is same as the 'error' function of jQuery.ajax.</td>
</tr>
<tr>
<td>onBeforeExpand</td>
<td>node</td>
<td>Fires before node is expanded, return false to cancel this expand action.</td>
</tr>
<tr>
<td>onExpand</td>

<td>node</td>
<td>Fires when node is expanded.</td>
</tr>
<tr>
<td>onBeforeCollapse</td>
<td>node</td>
<td>Fires before node is collapsed, return false to cancel this collapse action.</td>
</tr>
<tr>
<td>onCollapse</td>
<td>node</td>

<td>Fires when node is collapsed.</td>
</tr>
<tr>
<td>onCheck</td>
<td>node, checked</td>
<td>Fires when users click the checkbox.</td>
</tr>
<tr>
<td>onBeforeSelect</td>
<td>node</td>
<td>Fires before node is selected, return false to cancel this select action.</td>

</tr>
<tr>
<td>onSelect</td>
<td>node</td>
<td>Fires when node is selected.</td>
</tr>
<tr>
<td>onContextMenu</td>
<td>e, node</td>
<td>
Fires when node is right clicked. Code example:
<pre style="color:#006600">// right click node and then display the context menu
$('#tt').tree({
	onContextMenu: function(e, node){
		e.preventDefault();
		// select the node
		$('#tt').tree('select', node.target);
		// display context menu
		$('#mm').menu('show', {
			left: e.pageX,
			top: e.pageY
		});
	}
});

// the context menu is defined as below:
&lt;div id="mm" class="easyui-menu" style="width:120px;"&gt;
	&lt;div onclick="append()" iconCls="icon-add"&gt;Append&lt;/div&gt;
	&lt;div onclick="remove()" iconCls="icon-remove"&gt;Remove&lt;/div&gt;
&lt;/div&gt;
</pre>
</td>
</tr>

<tr>
<td>onDrop</td>
<td>target, source, point</td>
<td>Fires when a node is dropped.<br>
target: DOM object, The node being targeted for the drop.<br>
source: the source node.<br>
point: indicate the drop operation, posible values are: 'append','top' or 'bottom'.</td>
</tr>
<tr>
<td>onBeforeEdit</td>

<td>node</td>
<td>Fires before edit node.</td>
</tr>
<tr>
<td>onAfterEdit</td>
<td>node</td>
<td>Fires after edit node.</td>
</tr>
<tr>
<td>onCancelEdit</td>
<td>node</td>

<td>Fires when cancel the editing action.</td>
</tr>
</tbody></table>

<h4>Methods</h4>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Parameter</strong></th>

<th><strong>Description</strong></th>
</tr>
<tr>
<td>options</td>
<td>none</td>
<td>Return the options of tree.</td>
</tr>
<tr>
<td>loadData</td>
<td>data</td>
<td>Load the tree data.</td>

</tr>
<tr>
<td>getNode</td>
<td>target</td>
<td>get the specified node object.</td>
</tr>
<tr>
<td>getData</td>
<td>target</td>
<td>get the specified node data, including its children.</td>
</tr>

<tr>
<td>reload</td>
<td>target</td>
<td>Reload tree data.</td>
</tr>
<tr>
<td>getRoot</td>
<td>none</td>
<td>Get the root node, return node object</td>
</tr>
<tr>

<td>getRoots</td>
<td>none</td>
<td>Get the root nodes, return node array.</td>
</tr>
<tr>
<td>getParent</td>
<td>target</td>
<td>Get the parent node, the target parameter indicate the node DOM object.</td>
</tr>
<tr>
<td>getChildren</td>

<td>target</td>
<td>Get the children nodes, the target parameter indicate the node DOM object.</td>
</tr>
<tr>
<td>getChecked</td>
<td>none</td>
<td>Get all checked nodes.</td>
</tr>
<tr>
<td>getSelected</td>
<td>none</td>

<td>Get the selected node and return it, if no node selected return null.</td>
</tr>
<tr>
<td>isLeaf</td>
<td>target</td>
<td>Determine the specified node is leaf, the target parameter indicate the node DOM object.</td>
</tr>
<tr>
<td>find</td>
<td>id</td>
<td>
Find the specifed node and return the node object. Code example:
<pre style="color:#006600">// find a node and then select it
var node = $('#tt').tree('find', 12);
$('#tt').tree('select', node.target);
</pre>
</td>

</tr>
<tr>
<td>select</td>
<td>target</td>
<td>Select a node, the target parameter indicate the node DOM object.</td>
</tr>
<tr>
<td>check</td>
<td>target</td>
<td>Set the specified node to checked.</td>
</tr>

<tr>
<td>uncheck</td>
<td>target</td>
<td>Set the specified node to unchecked.</td>
</tr>
<tr>
<td>collapse</td>
<td>target</td>
<td>Collapse a node, the target parameter indicate the node DOM object.</td>
</tr>
<tr>

<td>expand</td>
<td>target</td>
<td>
Expand a node, the target parameter indicate the node DOM object.
When node is closed and has no child nodes, 
the node id value(named as 'id' parameter) will be sent to server to request child nodes data.
</td>
</tr>
<tr>
<td>collapseAll</td>
<td>target</td>
<td>Collapse all nodes.</td>
</tr>
<tr>
<td>expandAll</td>

<td>target</td>
<td>Expand all nodes.</td>
</tr>
<tr>
<td>expandTo</td>
<td>target</td>
<td>Expand from root to specified node.</td>
</tr>
<tr>
<td>append</td>
<td>param</td>

<td>Append some children nodes to a parent node. param parameter has two properties:<br>
parent: DOM object, the parent node to append to, if not assigned, append as root nodes.<br>
data: array, the nodes data.
Code example:
<pre style="color:#006600">// append some nodes to the selected node
var selected = $('#tt').tree('getSelected');
$('#tt').tree('append', {
	parent: selected.target,
	data: [{
		id: 23,
		text: 'node23'
	},{
		text: 'node24',
		state: 'closed',
		children: [{
			text: 'node241'
		},{
			text: 'node242'
		}]
	}]
});
</pre>
</td>
</tr>
<tr>
<td>toggle</td>
<td>target</td>
<td>Toggles expanded/collapsed state of the node, the target parameter indicate the node DOM object.</td>
</tr>
<tr>
<td>insert</td>

<td>param</td>
<td>Insert a node to before or after specified node. the 'param' parameter contains following properties:<br>
before: DOM object, the node to insert before.<br>
after: DOM object, the node to insert after.<br>
data: object, the node data.</td>
</tr>
<tr>
<td>remove</td>
<td>target</td>
<td>Remove a node and it's children nodes, the target parameter indicate the node DOM object.</td>

</tr>
<tr>
<td>pop</td>
<td>target</td>
<td>Pop a node and it's children nodes, the method is same as remove but return the removed node data.</td>
</tr>
<tr>
<td>update</td>
<td>param</td>
<td>Update the specified node. param has following properties:<br>
target(DOM object, the node to be updated),id,text,iconCls,checked,etc.</td>

</tr>
<tr>
<td>enableDnd</td>
<td>none</td>
<td>Enable drag and drop feature.</td>
</tr>
<tr>
<td>disableDnd</td>
<td>none</td>
<td>Disable drag and drop feature.</td>
</tr>

<tr>
<td>beginEdit</td>
<td>target</td>
<td>Begin editing a node.</td>
</tr>
<tr>
<td>endEdit</td>
<td>target</td>
<td>End editing a node.</td>
</tr>
<tr>

<td>cancelEdit</td>
<td>target</td>
<td>Cancel editing a node.</td>
</tr>
</tbody></table>

</div>	
</body>
</html>